<template>
  <div id="add-used-register">
    <div class="manual-entry-container">
      <div>
        <ul>
          <li>
            <span class="active">场地名称</span>
            <div class="cdmc">
              <el-input v-model="cdmc" disabled placeholder="请选择场地名称"></el-input
              ><i class="el-icon-edit edit-icon" @click="selectJXCDCS"></i>
            </div>
          </li>
          <li>
            <span class="active" style="height: 220px;padding-top: 100px;">使用时间</span>
            <div>
              <div class="select-major" style="width:400px">
                <div class="select-show">
                  <div
                    class="select-row"
                    v-for="(item, index) in selectRowInfoText"
                    :key="index"
                  >
                    <div class="text">{{ item.text }}</div>
                    <i
                      class="el-icon-delete edit-icon"
                      @click="deletedSelect(index)"
                    ></i>
                  </div>
                </div>
                <div style="margin-left: 20px">
                  <el-button
                    type="warning"
                    icon="el-icon-circle-plus-outline"
                    plain
                    @click="addUseTime"
                    size="mini"
                    >添加</el-button
                  >
                </div>
              </div>
            </div>
          </li>
          <li>
            <span class="active">使用人</span>
            <div>
              <el-input v-model="syr" placeholder="请输入使用人"></el-input>
            </div>
          </li>
          <li>
            <span class="active" style="height: 140px;padding-top: 55px;">事由</span>
            <div>
              <el-input v-model="sy" type="textarea" :rows="5"></el-input>
            </div>
          </li>
        </ul>
      </div>
      <div class="btn-caozuo">
        <el-button type="warning" size="mini" plain @click="savePlaceRegister" style="margin-right:100px"
          >保存</el-button
        >
        <el-button type="danger" size="mini" plain @click="cancelPlaceRegister"
          >取消</el-button
        >
      </div>
    </div>

    <el-dialog
      title="选择教学场地"
      :visible.sync="selectRomePlaceDialog"
      width="1400px"
      style="border: 0px; height: auto"
      class="jxkzj"
    >
      <select-class-room
        :source="'dialog'"
        @savePlaceInfo="savePlaceInfo"
        @cancelPlaceInfo="cancelPlaceInfo"
      ></select-class-room>
    </el-dialog>

    <el-dialog
      title="添加"
      :visible.sync="showAddMajorDialog"
      width="1250px"
      class="tj"
    >
      <div class="manual-entry-container" style="width: 100%">
        <div style="width: 100%; margin: 20px auto 0">
          <ul>
            <li style="height: 300px">
              <span class="active" style="height: 300px; padding-top: 110px"
                >使用时间选择</span
              >
              <div class="cdmc time-select">
                <!-- <div>
                  <el-checkbox v-model="time1"></el-checkbox>
                  <el-date-picker
                    style="margin-left: 20px"
                    v-model="data1"
                    type="date"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                  <el-select
                    style="margin-left: 20px"
                    v-model="section1"
                    placeholder="请选择"
                    size="mini"
                  >
                    <el-option
                      v-for="(item, index) in sectionList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                  -
                  <el-select
                    v-model="section2"
                    placeholder="请选择"
                    size="mini"
                  >
                    <el-option
                      v-for="(item, index) in sectionList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div> -->

                <div>
                  <el-checkbox v-model="time2"></el-checkbox>
                  <el-date-picker
                    style="margin-left: 20px"
                    v-model="data2_1"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                  -
                  <el-date-picker
                    v-model="data2_2"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                  <el-select
                    style="margin-left: 20px"
                    v-model="section3"
                    placeholder="请选择"
                    size="mini"
                  >
                    <el-option
                      v-for="(item, index) in sectionList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                  -
                  <el-select
                    v-model="section4"
                    placeholder="请选择"
                    size="mini"
                  >
                    <el-option
                      v-for="(item, index) in sectionList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>

                <div class="time3">
                  <el-checkbox v-model="time3"></el-checkbox>
                  <span style="margin-left: 20px">第</span>
                  <div class="mini-input">
                    <el-input v-model="week1"></el-input>
                  </div>
                  <span>周-第</span>
                  <div class="mini-input">
                    <el-input v-model="week2"></el-input>
                  </div>
                  <span>周</span>

                  <span style="margin-left: 15px">周 </span>
                  <div class="middle-input">
                    <el-select
                      style="width: 120px"
                      v-model="day"
                      placeholder="请选择"
                      size="mini"
                    >
                      <el-option
                        v-for="(item, index) in dayList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </div>
                  <el-select
                    style="margin-left: 20px"
                    v-model="section5"
                    placeholder="请选择"
                    size="mini"
                  >
                    <el-option
                      v-for="(item, index) in sectionList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                  -
                  <el-select
                    v-model="section6"
                    placeholder="请选择"
                    size="mini"
                  >
                    <el-option
                      v-for="(item, index) in sectionList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button  type="warning" size="mini" plain @click="submitTimeSelect">确 定</el-button>
        <el-button style="margin-left:120px" size="mini" type="danger" plain @click="cancelSelectTime">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import selectClassRoom from "../elective/selectClassRoom.vue";
import {
  cdsydj_place_list_details,
  cdsydj_place_list_update,
  cdsydj_place_list_add,
} from "@/api/trainingManagement/place.js";
import ButtonItem from "@/components/ButtonItem.vue";
export default {
  components: {
    ButtonItem,
    selectClassRoom,
  },
  name: "",
  data() {
    return {
      selectRomePlaceDialog: false, //选择教学场地弹窗
      showAddMajorDialog: false, //添加弹窗
      cdmc: "", //场地名称
      syr: "", //使用人
      sy: "", //事由
      selectRowInfo: [], //选择列表

      time1: "", //时间段1
      data1: "", //日期列表1
      section1: "", //
      section2: "", //
      sectionList: [{ label: "1", value: "1" },{ label: "2", value: "2" },{ label: "3", value: "3" },{ label: "4", value: "4" },
      { label: "5", value: "5" },{ label: "6", value: "6" },{ label: "7", value: "7" },{ label: "8", value: "8" },{ label: "9", value: "9" },{ label: "10", value: "10" }], //节次列表

      time2: "", //时间段1
      data2_1: "", //日期列表1
      data2_2: "", //日期列表1
      section3: "", //
      section4: "", //

      time3: "",
      week1: "", //
      week2: "", //
      day: "", //
      dayList: [
        { label: "一", value: "1" },
        { label: "二", value: "2" },
        { label: "三", value: "3" },
        { label: "四", value: "4" },
        { label: "五", value: "5" },
        { label: "六", value: "6" },
        { label: "日", value: "7" },
      ],
      section5: "", //
      section6: "", //
      registid: "", //登记id
      registType: "", //注册类型
      cdmcId: "", //场地名称id
      selectRowInfoText: [], //选择信息时间段文字
    };
  },
  mounted() {
    this.registid = this.$route.query.registid;
    this.registType = this.$route.query.type;
    console.log(this.registid ,this.registType, "this.registType----" )
    if (this.registType == "edit") {
      // 根据id查询详情
      this.queryDetails();
    }
  },
  methods: {
    // 保存教学场地
    savePlaceInfo(data) {
      this.cdmc = data[0].cdmc;
      this.cdmcId = data[0].id;
      console.log(this.cdmc, "cdmc");
      console.log(this.cdmcId, "id ===");
      this.cancelPlaceInfo();
    },
    cancelPlaceInfo() {
      this.selectRomePlaceDialog = false;
    },
    // 打开教学场地场所
    selectJXCDCS() {
      this.selectRomePlaceDialog = true;
    },
    // 选择节次确定
    submitTimeSelect() {
      if (!this.time2 && !this.time3) {
        this.$message.warning("请选择一个时间范围段!");
        return
      }
      if (this.time2 && this.time3) {
        this.$message.warning("只能选择一个时间范围段!");
        return
      }
      if (this.time3) {
         if ((this.week1 == "" || this.week1 == null) || (this.week2 == "" || this.week2 == null)) {
          this.$message.warning("请先输入周次")
          return;
        }
        if ((this.day == "" || this.day == null)) {
          this.$message.warning("请先选择日期")
          return;
        }
        if ((this.section5 == "" || this.section5 == null) || (this.section6 == "" || this.section6 == null)) {
          this.$message.warning("请先选节次!")
          return;
        }
        let min = parseInt(this.section5);
        let max = parseInt(this.section6);
        if (min > max) {
          this.$message.warning("请选择正确的上课节次!");
          return;
        }
        let course = "";
        for (let i = min; i <= max; i++) {
          course += i + ",";
        }
        course = course.substring(0, course.length - 1);
        let param = {
          type: "weeksList",
          startWeek: this.week1,
          endWeek: this.week2,
          week: this.day,
          courses: course,
        };
        // this.selectRowInfo.push(param);
        // this.selectRowInfoText.push({text: "第" +this.week1 + "周至第" + this.week2 + "周,  周" + this.day + " , " + min + "-" + max + "节"})
        this.selectRowInfo = [param];
        this.selectRowInfoText = [{text: "第" +this.week1 + "周至第" + this.week2 + "周,  周" + this.day + " , " + min + "-" + max + "节"}]
      }
      if (this.time2) {
        if ((this.data2_1 == "" || this.data2_1 == null) || (this.data2_2 == "" || this.data2_2 == null)) {
          this.$message.warning("请先选择时间范围")
          return;
        }
        if ((this.section3 == "" || this.section3 == null) || (this.section4 == "" || this.section4 == null)) {
          this.$message.warning("请先选节次!")
          return;
        }
        let min = parseInt(this.section3);
        let max = parseInt(this.section4);
        if (min > max) {
          this.$message.warning("请选择正确的上课节次!");
          return;
        }
        let course = "";
        for (let i = min ; i <= max; i++) {
          course += i + ",";
        }
        course = course.substring(0, course.length - 1);
        let param = {
          type: "daysList",
          startDay: this.data2_1,
          endDay: this.data2_2,
          courses: course,
        };
        // this.selectRowInfo.push(param);
        // this.selectRowInfoText.push({text: this.data2_1 + "至" + this.data2_2 + ", " + min + "到" + max + "节"})
        this.selectRowInfo = [param];
        this.selectRowInfoText = [{text: this.data2_1 + "至" + this.data2_2 + ", " + min + "到" + max + "节"}]
      }
      console.log(this.selectRowInfo, "==== ")
      this.cancelSelectTime();
      // if (this.time1) {
      //   let min = parseInt(this.section1);
      //   let max = parseInt(this.section2);
      //   if (min > max) {
      //     this.$message.warning("请选择正确的上课节次!");
      //     return;
      //   }
      //   let course = "";
      //   for (let i = min; i <= max; i++) {
      //     course += i + ",";
      //   }
      //   course = course.substring(0, course.length - 1);
      //   let param = {
      //     type: "dayList",
      //     dayDate: this.data2_1,
      //     courses: courses,
      //   };
      //   this.selectRowInfo.push(param);
      // }
    },
    cancelSelectTime() {
      this.showAddMajorDialog = false;
    },
    addUseTime() {
      this.showAddMajorDialog = true;
      if (this.selectRowInfo.length > 0) {
        this.selectRowInfo.forEach((item) => {
          if (item.type == "daysList") {
            this.time2 = true;
            this.data2_1 = item.startDay;
            this.data2_2 = item.endDay;
            let arr = item.courses.split(",");
            let max = Math.max(...arr);
            let min = Math.min(...arr);
            this.section3 = min;
            this.section4 = max;
          }
          if (item.type == "dayList") {
            this.time1 = true;
            this.data1 = item.dayDate;
            let arr = item.courses.split(",");
            let max = Math.max(...arr);
            let min = Math.min(...arr);
            this.section1 = min;
            this.section2 = max;
          }
          if (item.type == "weeksList") {
            this.time3 = true;
            this.week1 = item.startWeek;
            this.week2 = item.endWeek;
            this.day = item.week;
            let arr = item.courses.split(",");
            let max = Math.max(...arr);
            let min = Math.min(...arr);
            this.section5 = min;
            this.section6 = max;
          }
        });
      } else {
        this.time2 = ""; //时间段1
      this.data2_1 = ""; //日期列表1
      this.data2_2 = ""; //日期列表1
      this.section3 = ""; //
      this.section4 = ""; //

      this.time3 = "";
      this.week1 = ""; //
      this.week2 = ""; //
      this.day = ""; //
      this.section5 = ""; //
      this.section6 = ""; //
      }
    },
    cancelPlaceRegister() {
      this.$router.push("/admin/place/usedRegister");
    },
    async savePlaceRegister() {
      if (this.cdmc == "" || this.cdmc == null) {
        this.$message.warning("请先选择场地!");
        return;
      }
      if (this.selectRowInfo.length == 0) {
        this.$message.warning("请先选择使用时间!");
        return;
      }
      var params = {
        classroomid: this.cdmcId,
        classroomname: this.cdmc,
        usepeople: this.syr,
        reason: this.sy,
        daysList: [],
        dayList: [],
        weeksList: [],
      };
      if (this.selectRowInfo.length > 0) {
        this.selectRowInfo.forEach((item) => {
          if (item.type == "daysList") {
            let para = {
              startDay: item.startDay,
              endDay: item.endDay,
              courses: item.courses,
            };
            params.daysList.push(para);
          }
          if (item.type == "dayList") {
            let para = {
              dayDate: item.dayDate,
              courses: item.courses,
            };
            params.dayList.push(para);
          }
          if (item.type == "weeksList") {
            let para = {
              startWeek: item.startWeek,
              endWeek: item.endWeek,
              week: item.week,
              courses: item.courses,
            };
            params.weeksList.push(para);
          }
        });
      }

      // 修改时，添加id
      if (this.registType == "edit") {
        params.registid = this.registid;
        const res = await cdsydj_place_list_update(params);
        if (res.data.code == 200) {
          this.$message.success("登记成功!");
          this.$router.push({
            path: "/admin/place/usedRegister",
          });
        }
      } else {
        const res = await cdsydj_place_list_add(params);
        if (res.data.code == 200) {
          this.$message.success("登记成功!");
          this.$router.push({
            path: "/admin/place/usedRegister",
          });
        }
      }
    },
    //删除
    deletedSelect(index) {
      this.selectRowInfo.splice(index, 1);
      this.selectRowInfoText.splice(index, 1);
    },
    // 查询详情
    async queryDetails() {
      const res = await cdsydj_place_list_details(this.registid);
      if (res.data.code == 200) {
        this.cdmcId = res.data.data.classroomid;
        this.cdmc = res.data.data.classroomname;
        this.syr = res.data.data.usepeople;
        this.sy = res.data.data.reason;
        var rowList = [];
        var rowListText = [];
        // 第二类
        if (res.data.data.daysList.length > 0) {
          res.data.data.daysList.forEach((item) => {
            var par = item;
            par.type = "daysList";
            let text = item.startDay + "至" + item.endDay + "," + item.courses + "节"
            rowListText.push({text})
            rowList.push(par);
          });
        }
        // // 第一类
        // if (res.data.data.dayList.length > 0) {
        //   res.data.data.dayList.forEach((item) => {
        //     var par = item;
        //     par.type = "dayList";
        //     // let text = item.dayDate +  "," + item.courses + "节"
        //     // let par = {
        //     //   type: "dayList",
        //     //   text: text
        //     // }
        //     rowList.push(par);
        //   });
        // }
        // 第三类
        if (res.data.data.weeksList.length > 0) {
          res.data.data.weeksList.forEach((item) => {
            var par = item;
            par.type = "weeksList";
            let text = "第" +item.startWeek + "周至第" + item.endWeek + "周, 周" +  item.week + ", " + item.courses + "节"
            rowListText.push({text})
            rowList.push(par);
          });
        }

        this.selectRowInfoText = rowListText;
        this.selectRowInfo = rowList;
      }
    },
  },
};
</script>

<style scoped lang="less">
.manual-entry-container {
  > div:nth-child(1) {
    width: 1711px;
    // height: 785px;
    border: 1px solid rgba(0, 76, 167, 0.8);
    border-radius: 6px;
    margin: 70px auto 0;
    ul {
      list-style: none;
      li {
        border-bottom: 1px solid rgba(0, 76, 167, 0.4);
        height: auto;
        display: flex;
        align-items: center;
        > span {
          box-sizing: border-box;
          display: inline-block;
          font-size: 14px;
          color: rgba(0, 76, 167, 1);
          padding-left: 54px;
          border-right: 1px solid rgba(0, 76, 167, 0.4);
          height: 100px;
          padding-top: 40px;
          vertical-align: middle;
          &:nth-child(n) {
            width: 357px;
          }
          &:nth-child(2n) {
            width: 444px;
          }
          &:last-child {
            border-right: none;
          }
          &.active {
            font-size: 16px;
            color: rgba(0, 76, 167, 1);
            font-weight: bold;
            background: rgba(77, 129, 192, 0.1);
            text-align: center;
            padding-left: 0;
          }
        }
        > div {
          width: 800px;
          margin-left: 100px;
        }
        &.active {
          text-align: left;
          padding-left: 100px;
        }
        /deep/ .el-date-editor .el-input__inner {
          height: 28px;
        }
        /deep/ .el-date-editor .el-input__prefix {
          top: -3px;
          right: 10px;
        }
        /deep/ .el-input__inner {
          height: 28px;
        }
      }
      &:nth-child(1) {
        li {
          > span {
            height: 100px;
            &.active {
          text-align: left;
          padding-left: 100px;
        }
          }
          > div {
            width: 800px;
            margin-left: 100px;
          }
        }
      }
      &:nth-child(3) {
        li {
          border-bottom: 1px solid rgba(0, 76, 167, 0.4);
          display: flex;
          align-items: center;
          > span {
            width: 400px;
            text-align: center;
            padding-left: 0;
            height: 60px;
            &:nth-child(1) {
              width: 144px;
            }
            &:nth-child(2) {
              width: 180px;
            }
            &:nth-child(3) {
              width: 289px;
            }
            &:nth-child(4) {
              width: 196px;
            }
            &:nth-child(5) {
              width: 197px;
            }
            &:nth-child(6) {
              width: 197px;
            }
            &:nth-child(7) {
              width: 198px;
              padding-top: 8px !important;
              > span {
                display: inline-block;
                width: 121px;
                height: 28px;
                border: 1px solid #5230e9;
                background: rgba(235, 230, 255, 1);
                opacity: 1;
                border-radius: 4px;
                font-size: 14px;
                font-weight: 400;
                color: #5230e9;
                line-height: 18px;
                margin-top: 8px;
                padding: 5px 10px;
                cursor: pointer;
              }
            }
            &:nth-child(8) {
              width: 150px;
            }
            &:nth-child(9) {
              width: 182px;
            }
            &.active {
              border-top: 1px solid rgba(0, 76, 167, 0.4);
              height: 73px;
              padding-top: 25px;
            }
          }
          &:nth-child(2) {
            > div {
              height: 57px;
              padding: 18px 30px;
              > span {
                &:nth-child(1) {
                  font-size: 16px;
                  font-weight: bold;
                  color: #004ca7;
                }
                &:nth-child(2) {
                  font-size: 14px;
                  color: #004ca7;
                }
              }
            }
          }
        }
      }
    }
    > div {
      padding: 14px 83px;
      height: 78px;
      > div:nth-child(1) {
        font-size: 16px;
        font-weight: bold;
        color: #004ca7;
        margin-bottom: 10px;
      }
      > div:nth-child(2) {
        > span {
          font-size: 14px;
          color: rgba(0, 76, 167, 1);
          margin-right: 57px;
          > span {
            color: rgba(255, 56, 25, 1);
          }
        }
      }
    }
  }
  .button-group {
    text-align: center;
    margin-top: 36px;
    > div {
      display: inline-block;
      padding: 6px 20px;
      background: rgba(255, 246, 239, 1);
      border: 1px solid rgba(243, 184, 21, 1);
      border-radius: 4px;
      font-size: 18px;
      font-weight: 400;
      color: rgba(243, 184, 21, 1);
      text-align: center;
    }
  }
  .select-show {
    width: 420px;
    overflow: auto;
    .select-row {
      display: flex;
      margin: 10px 0;
      .text {
        border: 1px solid rgba(0, 76, 167, 0.8);
        padding: 2px 10px;
        border-radius: 5px;
        color: rgba(0, 76, 167, 0.8);
      }

      .edit-icon {
        color: #f5866a;
        display: flex;
        align-items: center;
        margin-left: 10px;
        cursor: pointer;
        font-size: 22px;
      }
    }
  }

  .select-major {
    display: flex;
    align-items: center;
    margin: 10px 0;
  }
}
.btn-caozuo {
  // display: flex;
  // align-items: center;
  // justify-content: space-around;
  // width: 800px;
  text-align: center;
  margin: 0 auto;
  padding-top: 20px;
}
/deep/ .el-input {
  width: 200px !important;
}

.cdmc {
  .edit-icon {
    font-size: 20px;
    color: #02c86c;
    margin-left: 10px;
    cursor: pointer;
  }
}

.time-select {
  height: 300px;
  padding: 20px 40px;
  margin: 0 !important;
  width: 850px !important;
  /deep/ .el-input {
    width: 130px !important;
  }
  > div {
    margin: 50px 25px;
  }
}

.time3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  > span {
    font-size: 16px;
    color: #004ca7;
  }

  .mini-input {
    /deep/ .el-input {
      width: 50px !important;
    }
  }
}

.jxkzj {
  /deep/ .el-dialog {
    height: 860px;
  }
}
</style>
// <style lang="less" scoped>
// // .assessment-container {
// .el-dialog__body {
//   // height: 251px;
//   .assessment-container {
//     width: 100%;
//     .table-container {
//       height: 380px;
//       overflow-y: auto;
//       width: 100%;
//       border: 0.8px solid #004ca7;
//       border-radius: 9px;
//       font-size: 14px;
//       font-family: Microsoft YaHei;
//       font-weight: 400;
//       color: #004ca7;
//     }
//   }
// }
// .el-dialog__footer {
//   padding: 10px 20px 45px;
// }
// .el-checkbox__inner:hover {
//   border-color: #004ca7;
// }
// .el-checkbox__inner {
//   border: 1px solid #004ca7;
//   border-radius: 0;
//   height: 18px;
//   width: 18px;
// }
// .el-checkbox__inner::after {
//   height: 10px;
//   left: 6px;
// }
// .el-checkbox__input.is-checked .el-checkbox__inner,
// .el-checkbox__input.is-indeterminate .el-checkbox__inner {
//   background-color: #004ca7;
//   border-color: #004ca7;
// }
// .el-checkbox__input.is-checked + .el-checkbox__label {
//   color: #004ca7;
// }
// .el-checkbox.is-bordered.is-checked {
//   border-color: #004ca7;
// }
// .el-checkbox__input.is-focus .el-checkbox__inner {
//   border-color: #004ca7;
// }

// .tj {
// }
// </style>

<style lang="less" scoped>
  #add-used-register{
    /deep/ .el-button--warning.is-plain{
      background: #FFF6EF;
      border-color: #F3B815;
      color: #F3B815;
      border-radius: 6px;
    }
    /deep/ .el-button--warning.is-plain:focus, .el-button--warning.is-plain:hover{
      color: #F3B815;
      background: #FFF6EF;
      border: 1px solid #F3B815;
      border-radius: 6px;
    }

    /deep/ .el-button--success.is-plain{
      background: #F1FFF8;
      border-color: #02C86C;
      color: #02C86C;
      border-radius: 6px;
    }
    /deep/ .el-button--success.is-plain:hover{
      background: #F1FFF8;
      border: 1px solid #02C86C;
      color: #02C86C;
      border-radius: 6px;
    }

    /deep/ .el-button--primary.is-plain{
      background: #F1F8FE;
      border-color: #51AEF6;
      color: #51AEF6;
      border-radius: 6px;
    }

    /deep/ .el-button--primary.is-plain:hover{
      background: #F1F8FE;
      border: 1px solid #51AEF6;
      color: #51AEF6;
      border-radius: 6px;
    }

    /deep/ .el-button--danger.is-plain{
      background: #FFEFEF;
      border-color: #FF3819;
      color: #FF3819;
      border-radius: 6px;
    }

    /deep/ .el-button--danger.is-plain:hover{
      background: #FFEFEF;
      border: 1px solid #FF3819;
      color: #FF3819;
      border-radius: 6px;
    }
  }
</style>
